<template>
  <span class="container" :id="id"></span>
</template>

<script lang="ts">
  import { CountUp } from 'countup.js'
  import {defineComponent, nextTick} from 'vue'
  export default defineComponent({
    name: 'CountUp',
    props:{
      id: {
        type: String,
        required: true,
      },
      startVal: {
        type: Number,
        default: 0,
      },
      endVal:{
        type: Number,
        required: true,
      },
      duration:{
        type: Number,
        default: 2,
      },
      decimalPlaces:{
        type: Number,
        default: 0,
      },
      decimal:{
        type: String,
        default: '.'
      },
      useGrouping: Boolean,
      useEasing: Boolean,
      separator: {
        type: String,
        default: ','
      }
    },
    setup(props){
      nextTick(()=>{
        let demo = new CountUp(props.id, props.endVal,props)
        demo.start()
      })
    },
  })
</script>

<style lang="scss" scoped>
  .container{
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
  }
</style>
